// import React from 'react';
import { Switch, Redirect, Route, useParams, useRouteMatch, Link } from 'react-router-dom';

const PEEPS = [
    { id: 0, name: 'Michelle', friends: [1, 2, 3] },
    { id: 1, name: 'Sean', friends: [0, 3] },
    { id: 2, name: 'Kim', friends: [0, 1, 3] },
    { id: 3, name: 'David', friends: [1, 2] }
];

const find = (id) => PEEPS.find((p) => p.id === id);

function Person () {
    let { url } = useRouteMatch();
    let { id } = useParams();
    const person = find(parseInt(id));
    return (
        <div>
            <ul>
                {
                    person.friends.map((id) => (
                        <li key={id}>
                            <Link to={`${url}/${id}`}>{find(id).name}</Link>
                        </li>
                    ))
                }
            </ul>
            <Switch>
                <Route path={`${url}/:id`}>
                    <Person />
                </Route>
            </Switch>
        </div>
    );
}

export default function RecursiveExample () {
    return (
        <Switch>
            <Route path="/:id">
                <Person />
            </Route>
            <Route path="/">
                <Redirect to="/0" />
            </Route>
        </Switch>
    );
}
